<template>
	<view class="vip" :style="{'--height':`${topNavbarBgHeight}rpx`}">
		<common-navbar title="会员充值" :background="background" backIconColor="#ffffff" titleColor="#ffffff" />
		<view class="vip-interests-list-container">
			<view class="vip-interests-item">
				<view class="interests-icon-wrapper">
					<u-image
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/a7cb1164-1bef-47c1-85d5-2a0ecdd688cc.png"
						width="100%" height="100%" border-radius="100%" />
				</view>
				<view class="interests-name">
					免费在线咨询
				</view>
			</view>
			<view class="vip-interests-item">
				<view class="interests-icon-wrapper">
					<u-image
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/071c0042-85fc-4265-ba27-a01aa67ff275.png"
						width="100%" height="100%" border-radius="100%" />
				</view>
				<view class="interests-name">
					畅享十项服务
				</view>
			</view>
			<view class="vip-interests-item">
				<view class="interests-icon-wrapper">
					<u-image
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/77d1edcd-4ba6-4534-a5f2-b4239ccf712e.png"
						width="100%" height="100%" border-radius="100%" />
				</view>
				<view class="interests-name">
					尊享会员身份
				</view>
			</view>
		</view>
		<view class="vip-interests-content-container">
			<view class="vip-interests-content-item" v-for="(item,index) in vipContentList" :key="index">
				<view class="vip-interests-content">{{item.text}}</view>
			</view>
		</view>
		<view class="open-vip-container" v-if="vipPackageId">
			<view class="open-vip-left">
				<view class="open-vip-label">
					小律懂法年度VIP
				</view>
				<view class="open-vip-slogan">
					每天仅需1块钱
				</view>
			</view>
			<view class="open-vip-right" @click="placeOrder">
				￥{{vipPrice}}/立即开通
			</view>
			<view class="open-vip-hint">
				分享好友即可免费获得会员资格，<text class="entrance" @click="$u.route('/pages/promote/promote')">点击了解一下</text>
			</view>
		</view>
		<payBar ref="payBar" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#023082'
				},
				vipPrice: 0,
				vipContentList: [],
				vipPackageId: 0,
			}
		},
		onLoad() {
			this.getVipInterests();
		},
		computed: {
			topNavbarBgHeight() {
				return 750 * (this.$systemInfo.statusBarHeight + 44) / this.$systemInfo.screenWidth;
			}
		},
		methods: {
			async getVipInterests() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getVipInterests);
				console.log('会员权益内容>>>>>>>>>>>>>>>>', data);
				this.vipContentList = data.content;
				this.vipPrice = data.vip_price;
				this.vipPackageId = data.vip_package_id;
			},
			async placeOrder() {
				const pay_type = await this.getPayType();
				this.$u.post(this.$restUrl.placeOrderWithVip, {
					vip_package_id: this.vipPackageId,
					pay_type,
				}).then(async ({
					data
				}) => {
					if (pay_type == 1) {
						const options = {
							taskCode: data.task_code,
							price: data.amount,
							countDown: data.expires_time,
						}
						await this.$refs.payBar.pay(options);
					} else if (pay_type == 2) {
						const res = await this.$u.post(this.$restUrl.getWXPayOptions, {
							task_code: data.task_code,
							amount: data.amount,
						})
						await this.$wx.WXPay({...res.data,task_code:data.task_code});
					}
					console.log('支付成功')
					this.$u.route(`/pages/order_detail/orderDetail?taskCode=${data.task_code}`)
					this.updateUserInfo();
				}).catch(err => {
					console.log(err)
					if (err.status_code == 404) {
						this.$u.route(`/pages/order_detail/orderDetail?taskCode=${err.data.task_code}`)
					}
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./vip.scss";
</style>
